<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-button @click="getLogs" size="mini">刷新</el-button>
      <el-popconfirm
        title="确认要删除？"
        @confirm="clearAll"
        class="mg-left-10"
      >
        <el-button slot="reference" type="danger" size="mini"
          >删除该规则所有日志</el-button
        >
      </el-popconfirm>
    </div>
    <el-table
      size="small"
      :data="logs"
      highlight-current-row
      v-loading="$store.state.loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column sortable prop="state" label="状态" width="150">
        <template slot-scope="scope">
          {{ getStateName(scope.row.state) }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="success" label="执行结果" width="100">
        <template slot-scope="scope">
          {{ scope.row.success ? "成功" : "失败" }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="content" label="详细信息">
      </el-table-column>
      <el-table-column sortable prop="logAt" label="执行时间" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.logAt | timestampToTime }}</div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :data="query" @onPagePaging="getLogs"></Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination.vue";
import { RuleLogsList, RuleLogsClear } from "@/api/ruleApi.js";
export default {
  name: "RuleLogs",
  props: {
    ruleId: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      loading: false,
      query: {
        ruleId: this.ruleId,
        page: 1,
        size: 10,
        total: 0,
      },
      logs: [],
    };
  },
  components: {
    Pagination,
  },
  created() {
    this.getLogs();
  },
  watch: {
    ruleId(val) {
      this.query.ruleId = val;
      this.getLogs();
    },
  },
  methods: {
    getStateName(state) {
      switch (state) {
        case "matched_listener":
          return "匹配到监听器,过滤器执行失败";
        case "matched_filter":
          return "过滤器执行通过,动作执行失败";
        case "unmatched_filter":
          return "过滤器执行未通过";
        case "executed_action":
          return "动作执行完成";
      }
      return "";
    },
    getLogs() {
      RuleLogsList(this.query).then((res) => {
        this.query.total = res.total;
        this.logs = res.data;
      });
    },
    clearAll() {
      RuleLogsClear(this.ruleId).then(() => {
        this.getLogs();
      });
    },
  },
};
</script>